<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" />
    <div class="container">
      <!-- 主体 -->
      <div class="containerMain">
        <!-- 左侧 -->
        <div class="containerMainLeft">
          <el-card class="containerMainLeftCard" shadow="always" :body-style="{ padding: '0' }">
            <h1 class="containerMainLeftH1">型体</h1>
            <Table :tableHeader="tableHeader" :tableData="tableData1" :selection="true" :TableHeight="60" />
            <!-- card body -->
          </el-card>
        </div>

        <!-- 右侧 -->
        <div class="containerMainRight" style="overflow: hidden">
          <el-card class="containerMainRightCard" shadow="always" :body-style="{ padding: '0' }">
            <!-- 基本资料 -->
            <div class="containerMainRightHeader">
              <h1 class="containerMainRightHeaderH1">基本资料</h1>
              <div class="containerMainRightHeaderO">
                <!-- 左 -->
                <div class="containerMainRightHeaderLeft">
                  <el-form-item class="containerMainRightHeaderItem" label="鞋名">
                    <el-input placeholder=" " style="width: 290px" />
                  </el-form-item>

                  <el-form-item class="containerMainRightHeaderItem" label="客户">
                    <el-input placeholder=" " style="width: 105px" />
                  </el-form-item>

                  <el-form-item class="containerMainRightHeaderItem formItemL" label="客户型体">
                    <el-input placeholder=" " style="width: 105px" />
                  </el-form-item>

                  <el-form-item class="containerMainRightHeaderItem" label="商标">
                    <el-input placeholder=" " style="width: 105px" />
                  </el-form-item>

                  <el-form-item label="原客户型体" class="containerMainRightHeaderItem formItem">
                    <el-input placeholder=" " style="width: 105px" />
                  </el-form-item>
                </div>

                <!-- 右 -->
                <div class="containerMainRightHeaderRight">
                  <div class="containerMainRightHeaderRightOne">
                    <el-form-item label="码制" class="containerMainRightHeaderItem fomItemL">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="季度" class="containerMainRightHeaderItem fomItemL">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="大底厂商" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>
                  </div>

                  <div class="containerMainRightHeaderRightOne">
                    <el-form-item style="margin-left: -24px" label="基本号(鞋号)" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="鞋类分类" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="大底类别" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>
                  </div>

                  <div class="containerMainRightHeaderRightOne">
                    <el-form-item style="margin-left: -51px" label="基本号(冲刀)" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item style="margin-left: -28px" label="鞋款性别" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="版师" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>
                  </div>

                  <div class="containerMainRightHeaderRightOne itemListfinally">
                    <el-form-item style="margin-left: -14px" label="材质类别" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item style="margin-left: -14px" label="成型做法" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>

                    <el-form-item label="核料员" class="containerMainRightHeaderItem">
                      <el-input placeholder=" " style="width: 88px" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </div>

            <!-- 制具 -->
            <div class="containerMainRightMain">
              <h1 style="font-size: 16px; margin-bottom: 5px" class="containerMainRightHeaderH1">制具</h1>
              <div class="containerMainRightHeaderTable">
                <Table :tableHeader="tableHeader1" :tableData="tableData1" :TableHeight="600" />
              </div>
            </div>

            <!-- 配码 -->
            <div class="containerMainRightCode">
              <h1 style="font-size: 16px" class="containerMainRightHeaderH1">配码</h1>
              <Table :tableHeader="tableHeader2" :tableData="tableData1" :selection="true" :TableHeight="600" />
            </div>

            <!-- 型体配色 -->
            <h1 style="font-size: 16px; margin-left: 25px" class="containerMainRightHeaderH1">型体配色</h1>
            <div class="containerMainRightFooter">
              <div class="containerMainRightFooterDiv">
                <div class="containerMainRightFooterDivOne">
                  <Table :tableHeader="tableHeader3" :tableData="tableData1" :selection="true" :TableHeight="590" />
                </div>
              </div>
            </div>

            <PageModule style="margin-top: -30px" :PageData="{ pageSizeShow: true }" />
            <!-- card body -->
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'RdTypeQueryAl'
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入冲刀',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '制单员',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '季度',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '客户',
    selectLabel: '',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      }
    ]
  },
  {
    type: 'checkbox',
    checkboxLabel: '我的型体',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '所有型体',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '整单删除'
  },
  {
    type: 'button',
    checkboxLabel: '制单员变更'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '转型体配色BOM建档'
  },
  {
    type: 'button',
    checkboxLabel: '转指令资料输入'
  }
])

const findData = (a: any) => {}

const tableHeader = ref([
  {
    label: '编号',
    prop: 'slipNo'
  },
  {
    label: '制单员',
    prop: 'slipDate'
  },
  {
    label: '图片',
    fixed: true,
    prop: 'dutyDeptName'
  }
])

const tableHeader1 = ref([
  {
    label: '序号',
    prop: 'slipNo'
  },
  {
    label: '楦头编号',
    prop: 'slipDate'
  },
  {
    label: '冲刀编号',
    prop: 'dutyDeptName'
  },
  {
    label: '中底编号',
    prop: 'dutyDeptName'
  },
  {
    label: '鞋垫编号',
    prop: 'dutyDeptName'
  },
  {
    label: '段',
    prop: 'dutyDeptName'
  },
  {
    label: '鞋码起',
    prop: 'dutyDeptName'
  },
  {
    label: '鞋码止',
    prop: 'dutyDeptName'
  }
])

const tableHeader2 = ref([
  {
    label: '鞋码',
    prop: 'slipNo'
  },
  {
    label: '冲刀',
    prop: 'slipDate'
  },
  {
    label: '楦头',
    prop: 'dutyDeptName'
  },
  {
    label: '大底',
    prop: 'dutyDeptName'
  },
  {
    label: '中底',
    prop: 'dutyDeptName'
  },
  {
    label: '鞋垫/脚床',
    prop: 'dutyDeptName'
  }
])

const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'slipNo'
  },
  {
    label: '颜色代号',
    prop: 'slipDate'
  },
  {
    label: '颜色名称',
    prop: 'dutyDeptName'
  },
  {
    label: '颜色名称(英)',
    prop: 'dutyDeptName'
  },
  {
    label: '颜色简称',
    prop: 'dutyDeptName'
  }
])

// 左侧表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<style lang="less" scoped>
// 主体
.container {
  width: 100%;
}

// 筛选查询行
.search {
  height: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;

  .searchImg {
    width: 20px;
    height: 20px;
  }

  .searchText {
    font-size: 14px;
    font-family: PingFangSC-Medium-, PingFangSC-Medium;
    color: #666666;
    margin-left: 8px;
  }
}

// 头部
.containerHeader {
  width: 90%;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

// 下边主体
.containerMain {
  width: 100%;
  display: flex;
}

// 左侧型体
.containerMainLeft {
  width: 333px;
}

// 右侧型体颜色
.containerMainRight {
  margin-left: 20px;
  width: 80%;
}

// 左侧Card
.containerMainLeftCard {
  width: 100%;
  box-shadow: none;
}

// 右侧Card
.containerMainRightCard {
  width: 100%;
  box-shadow: none;
}

// 按钮颜色
.containerHeaderBtn {
  background-color: #f89027;
  width: 64px;
  height: 23px;
  margin-top: 15px;
  margin-left: -10px;
}

// 型体
.containerMainLeftHeader {
  width: 90%;
  margin: auto;
}

// 全码用量资料
.containerMainLeftMain {
  width: 90%;
  height: 220px;
  margin: auto;
  margin-top: 20px;
}

// 型体配色备注
.containerMainLeftFooter {
  width: 90%;
  height: 220px;
  margin: auto;
  margin-top: 40px;
}

// 字体
.containerMainLeftH1 {
  font-size: 16px;
  margin-top: 13px;
}

// 纵向滚动条
:deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
  opacity: 1;
  width: 6px; // 纵向滑块的宽度
  border-radius: 2px;
  background-color: var(--el-color-primary);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

// 型体表体
.containerMainLeftH1 {
  font-size: 16px;
  margin-left: 15px;
}

// 基本资料
.containerMainRightHeader {
  width: 100%;
  height: 180px;
  margin-left: 50px;

  .containerMainRightHeaderH1 {
    width: 100%;
    font-size: 16px;
    margin-top: 5px;
    margin-left: -20px;
  }

  .containerMainRightHeaderO {
    width: 100%;
    display: flex;
    margin-top: -15px;

    .containerMainRightHeaderLeft {
      width: 400px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;

      .containerMainRightHeaderItem {
        font-size: 14px;
        margin-right: 2px !important;
        margin-top: 10px;
      }

      .el-form-item {
        margin-top: -7px;
      }
    }

    .containerMainRightHeaderRight {
      width: 73%;
      height: 155px;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}

//制具
.containerMainRightMain {
  width: 95%;
  height: 180px;
  margin: auto;
  margin-top: -20px;
}

// 配码
.containerMainRightCode {
  width: 95%;
  height: 180px;
  margin: auto;
  margin-top: 5px;

  .CodeTable {
    margin-top: -1px !important;
  }
}

//型体配色
.containerMainRightFooter {
  width: 100%;
  height: 150px;
  margin-top: 5px;
  margin-left: 27px;
  display: flex;
}

.formItemL {
  margin-left: 12px;
}

// lable 行高
:deep(.el-form-item__label) {
  line-height: 32px;
}

// 基本资料里的右侧部分
.containerMainRightHeaderRightOne {
  width: 25%;
  font-size: 14px;
  margin-top: 10px;
  margin-left: 5px;

  .el-form-item {
    margin-top: -8px;
  }
}

.fomItemL {
  margin-left: 27px;
}

.itemListfinally {
  margin-left: -20px;
}

.containerMainRightHeaderTable {
  margin-top: -10px;
}

:deep(.containerMainRightHeaderTable .el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.containerMainRightHeaderTable .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.containerMainRightHeaderTable .el-select) {
  --el-select-border-color-hover: #fff;
}

// 表格第一行变色
:deep(.containerMainRightCode .el-table tr:first-of-type td) {
  background-color: #fff5eb;
}

// 底部表格
.containerMainRightFooterDiv {
  width: 60%;

  .containerMainRightFooterDivTwo {
    margin-left: -20px;
  }

  .containerMainRightFooterDivOne {
    margin-top: -7px;
  }
}

.table2 {
  margin: 12px 0px 5px;

  :deep(.cell) {
    line-height: normal;
  }

  :deep(.el-table) {
    --el-table-row-hover-bg-color: white; // background-color: white;
  }

  // 表格最上面边框
  :deep(.el-table--border .el-table__inner-wrapper::after) {
    // left: 0;
    position: relative;
  }

  // 表格最外边框
  :deep(.el-table--border, .el-table--group) {
    border: none;
  }

  // 头部边框
  :deep(.customer-table thead tr th.is-leaf) {
    // border: 1px solid #EBEEF5;
    border-right: none;
  }

  // 左边边框
  :deep(.customer-table thead tr th:nth-last-of-type(2)) {
    border-right: none;
  }

  // 取消左侧头部边框
  :deep(.el-table--border .el-table__inner-wrapper tr:first-child th:first-child) {
    border-left: none;
  }

  // 左侧体边框修改top
  :deep(.el-table__border-left-patch) {
    top: 40px;
    left: 0;
    width: 1px;
    height: 100%;
    z-index: 3;
    position: absolute;
    background-color: var(--el-table-border-color);
  }

  // 表格最外层边框-底部边框
  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.customer-table::before) {
    width: 0;
  }

  // 取消表格底部边框
  :deep(.el-table__inner-wrapper::before) {
    position: relative;
  }

  // 表格有滚动时表格头边框
  :deep(.el-table--border th.gutter:last-of-type) {
    border: 1px solid #ebeef5;
    border-left: none;
  }
}

.table {
  padding-top: 6px;

  :deep(.cell) {
    text-align: center;
  }

  :deep(.el-table__inner-wrapper) {
    color: #191919;
  }

  // 斑马条纹颜色
  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background: #f6f6f6;
  }
}
</style>
